<template>
  <div class="home">
    <div class="head">
      <indexHeader></indexHeader>
    </div>
    <div class="left">
      <slideBar :slideList=slideList></slideBar>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
    <div class="cover" v-show="$store.state.ifShowCover" @click="closeCover"></div>
    <video-full-play :videoSrc=videoSrc></video-full-play>
  </div>
</template>

<script>
import indexHeader from '../Home/components/IndexHeader'
import slideBar from '../Home/components/slideBar'
import videoFullPlay from '../Home/components/videoFullPlay'
import { removeProjectId } from '../../utils/projectId'
export default {
  data () {
    return {}
  },
  components: { indexHeader, slideBar, videoFullPlay },
  created () {
    // console.log(111)
    removeProjectId()
  },
  methods: {
    closeCover () {
      this.$store.commit('set_ifShowCover', false)
    }
  },
  computed: {
    slideList () {
      return this.$store.state.permission.addRoutes[1] && this.$store.state.permission.addRoutes[1].children
    },
    videoSrc () {
      return this.$store.state.videoSrc
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  .head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
  }
  .left {
    position: absolute;
    top: 64px;
    left: 0;
    height: calc(100% - 64px);
    width: 220px;
  }
  .right {
    position: absolute;
    top: 64px;
    right: 0px;
    height: calc(100% - 64px);
    width: calc(100% - 220px);
    background-color: #f2f2f2;
    color: #333;
    overflow: auto;
    &::-webkit-scrollbar {
    display: none;
}
  }
  .cover{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>
